<template>
	<div class="body">
		<view class="v1">
			<p class="p1">需支付:</p>
			<p class="p2">￥20.00</p>
			<radio-group name="radio-group">
				<!-- 第一个 -->
				<view class="v1-1"><label class="label1">
					<img src="../../static/pay_03.gif" alt="">
					<p class="p3">余额支付</p>
					<p class="p4">余额剩余:￥80.00</p>
					<p class="p5">充值</p>
					<radio value="radio1"/>
				</label></view>
				<!-- 第二个 -->
				<view class="v1-2"><label class="label2">
					<img src="../../static/pay_06.gif" alt="">
					<p class="p3">水票支付</p>
					<p class="p4">两张金额水票不通用</p>
					<p class="p5">购买</p>
					<radio value="radio1"/>
				</label></view>
				<!-- 第三个 -->
				<view class="v1-3"><label class="label3">
					<img src="../../static/pay_08.gif" alt="">
					<p class="p3">微信支付</p>
					<p class="p4">使用微信进行支付</p>
					<p class="p5">  </p>
					<radio value="radio1"/>
				</label></view>
				<!-- 第四个 -->
				<view class="v1-4"><label class="label4">
					<img src="../../static/pay_10.gif" alt="">
					<p class="p3">货到支付</p>
					<p class="p4">直接支付给配送员现金或纸质水票</p>
					<p class="p5">  </p>
					<radio value="radio1"/>
				</label></view>
			</radio-group>
		</view>
		<view class="last">
			<button>支付</button>
		</view>
	</div>
</template>

<script>
</script>

<style>
	.body{
		width: 100%;
		height: 37.62rem;
		background: #eee;
		overflow: hidden;
	}
	.v1{
		margin-left: 0.625rem;
		margin-top: 0.625rem;
		width: 95%;
		height: 22.81rem;
		line-height: 20px;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		overflow: hidden;

	}
	.v1 .p1{
		margin-left: 11.3rem;
		margin-top: 23px;
		width: 111px;
		height: 22px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		text-align: left;
		font-family: PingFangSC-regular;

	}
	.v1 .p2{
		margin-right: 10px;
		margin-top: -21px;
		color: #32a1d9;
		font-size: 16px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: right;

	}
	/* 第一个 */
	.v1-1{
		margin-top:-70px;
		border-bottom:1px solid #f2f2f2;
		height: 3.13rem;
	}
	.v1 .label1{
		overflow: hidden;
		margin-top:-160px;
	}
	.v1 .label1 img{
		left: 28px;
		top: 50px;
		width: 38px;
		height: 38px;
		float: left;

	}
	.v1 .label1 .p3{
		margin-left: 10px;
		margin-top: 0px;
		/* width: 56px;
		height: 20px; */
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: left;

	}
	.v1 .label1 .p4{
		margin-left: -60px;
		margin-top: 22px;
		float: left;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.v1 .label1 .p5{
		/* left: 233px;
		top: 160px; */
		margin-top:90px;
		margin-left:183px;
		width: 87px;
		height: 20px;
		border-radius: 10px;
		color: rgba(59, 156, 219, 1);
		font-size: 12px;
		text-align: center;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(59, 156, 219, 1);

	}
	.v1 label radio{
		float: right;
		margin-top: -20px;
	}
	/* 第二个 */
	.v1-2{
		margin-top:-70px;
		border-bottom:1px solid #f2f2f2;
		height: 3.13rem;
	}
	.v1 .label2{
		overflow: hidden;
		margin-top:-160px;
	}
	.v1 .label2 img{
		left: 28px;
		top: 50px;
		width: 38px;
		height: 38px;
		float: left;
	
	}
	.v1 .label2 .p3{
		margin-left: 10px;
		margin-top: 0px;
		/* width: 56px;
		height: 20px; */
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: left;
	
	}
	.v1 .label2 .p4{
		margin-left: -60px;
		margin-top: 22px;
		float: left;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.v1 .label2 .p5{
		/* left: 233px;
		top: 160px; */
		margin-top:90px;
		margin-left:183px;
		width: 87px;
		height: 20px;
		border-radius: 10px;
		color: rgba(59, 156, 219, 1);
		font-size: 12px;
		text-align: center;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(59, 156, 219, 1);
	
	}
	.v1 label radio{
		float: right;
		margin-top: -20px;
	}
	/* 第三个 */
	.v1-3{
		margin-top:-70px;
		border-bottom:1px solid #f2f2f2;
		height: 3.13rem;
	}
	.v1 .label3{
		overflow: hidden;
		margin-top:-160px;
	}
	.v1 .label3 img{
		left: 28px;
		top: 50px;
		width: 38px;
		height: 38px;
		float: left;
	
	}
	.v1 .label3 .p3{
		margin-left: 10px;
		margin-top: 0px;
		/* width: 56px;
		height: 20px; */
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: left;
	
	}
	.v1 .label3 .p4{
		margin-left: -60px;
		margin-top: 22px;
		float: left;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.v1 .label3 .p5{
		/* left: 233px;
		top: 160px; */
		margin-top:90px;
		margin-left:183px;
		width: 87px;
		height: 20px;
		border-radius: 10px;
		/* color: rgba(59, 156, 219, 1); */
		font-size: 12px;
		text-align: center;
		font-family: Microsoft Yahei;
		/* border: 1px solid rgba(59, 156, 219, 1); */
	
	}
	.v1 label radio{
		float: right;
		margin-top: -20px;
	}
	/* 第四个 */
	.v1-4{
		margin-top:-70px;
		border-bottom:1px solid #f2f2f2;
		height: 3.13rem;
	}
	.v1 .label4{
		overflow: hidden;
		margin-top:-160px;
	}
	.v1 .label4 img{
		left: 28px;
		top: 50px;
		width: 38px;
		height: 38px;
		float: left;
	
	}
	.v1 .label4 .p3{
		margin-left: 10px;
		margin-top: 0px;
		/* width: 56px;
		height: 20px; */
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		float: left;
	
	}
	.v1 .label4 .p4{
		margin-left: -60px;
		margin-top: 22px;
		float: left;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.v1 .label4 .p5{
		/* left: 233px;
		top: 160px; */
		margin-top:90px;
		margin-left:183px;
		width: 87px;
		height: 20px;
		border-radius: 10px;
		color: rgba(59, 156, 219, 1);
		font-size: 12px;
		text-align: center;
		font-family: Microsoft Yahei;
		/* border: 1px solid rgba(59, 156, 219, 1); */
	
	}
	.v1 label radio{
		float: right;
		margin-top: -20px;
	}
	.last button{
		/* left: 18px;
		top: 587px; */
		width: 340px;
		height: 40px;
		border-radius: 4px;
		background-color: rgba(59, 156, 219, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Microsoft Yahei;
		margin-top:170px;

	}
</style>
